<template>
  <a-card title="发布经费申报通知" class="notification-form">
    <a-form
      :model="form"
      :rules="rules"
      ref="formRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <!-- 项目名称 -->
      <a-form-item label="项目名称" name="projectName">
        <a-input
          v-model:value="form.projectName"
          placeholder="请输入项目名称"
        />
      </a-form-item>

      <!-- 经费数额 -->
      <a-form-item label="经费数额" name="fundAmount">
        <a-input-number
          v-model:value="form.fundAmount"
          min="0"
          style="width: 100%"
          placeholder="请输入经费数额"
        />
      </a-form-item>

      <!-- 申报条件 -->
      <a-form-item label="申报条件" name="applicationCriteria">
        <a-select
          v-model:value="form.applicationCriteria"
          placeholder="请选择申报条件"
          :options="criteriaOptions"
        />
      </a-form-item>

      <!-- 上传二维码 -->
      <a-form-item label="咨询群二维码" name="qrCode">
        <a-upload
          v-model:file-list="form.qrCode"
          :before-upload="beforeUpload"
          :max-count="1"
          :show-upload-list="true"
          accept="image/*"
        >
          <a-button icon="upload"> 点击上传二维码 </a-button>
        </a-upload>
      </a-form-item>

      <!-- 上传项目资料包 -->
      <a-form-item label="资料包" name="materials">
        <a-upload
          v-model:file-list="form.materials"
          :before-upload="beforeUpload"
          :show-upload-list="true"
          multiple
        >
          <a-button icon="upload"> 点击上传资料包 </a-button>
        </a-upload>
      </a-form-item>

      <!-- 提交按钮 -->
      <a-form-item :wrapper-col="wrapperColButton">
        <a-button type="primary" @click="handleSubmit"> 发布通知 </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script setup>
import { message } from 'ant-design-vue'
import { reactive, ref } from 'vue'

const form = reactive({
  projectName: '',
  fundAmount: null,
  applicationCriteria: null,
  qrCode: [],
  materials: []
})
const labelCol = {
  span: 5
}
const wrapperCol = {
  span: 13
}
const wrapperColButton = {
  span: 16,
  offset: 11
}
const rules = {
  projectName: [
    { required: true, message: '项目名称不能为空', trigger: 'blur' }
  ],
  fundAmount: [
    { required: true, message: '经费数额不能为空', trigger: 'blur' }
  ],
  applicationCriteria: [
    { required: true, message: '请选择申报条件', trigger: 'change' }
  ],
  qrCode: [
    { required: true, message: '请上传咨询群二维码', trigger: 'change' }
  ],
  materials: [{ required: true, message: '请上传资料包', trigger: 'change' }]
}

const criteriaOptions = [
  { label: '一级志愿者 - 1000元', value: 'level1' },
  { label: '二级志愿者 - 5000元', value: 'level2' },
  { label: '三级志愿者 - 10000元', value: 'level3' }
]

const formRef = ref()

const beforeUpload = (file) => {
  const isImage = file.type.includes('image')
  if (!isImage) {
    alert('只支持上传图片文件')
  }
  return isImage
}

const handleSubmit = () => {
  message.error('功能尚未开发，请等待后续更新')
  formRef.value
    .validate()
    .then(() => {
      console.log('表单数据:', form)

      // 这里调用后端接口提交数据
    })
    .catch((error) => {
      console.error('表单验证失败:', error)
    })
}
</script>

<style scoped>
.notification-form {
  margin: 20px;
}
</style>
